<template>
    <div>
        <div class="container right-panel-active" v-cloak>
            <!-- 登录 -->
            <div class="container__form container--signup">
                <form class="form">
                    <h2 class="form__title">登录</h2>
                    <input v-model="form.username" type="text" placeholder="请输入账号" class="input" />
                    <input v-model="form.password" type="password" placeholder="请输入密码" class="input" />
                    <button class="btn" @click.prevent="login()">登录</button>
                </form>
            </div>
            <!-- 注册 -->
            <div class="container__form container--signin">
                <form class="form">
                    <h2 class="form__title">注册</h2>
                    <input v-model="form.username" type="text" placeholder="请设置昵称" class="input"/>
                    <input v-model="form.password" type="password" placeholder="请设置密码" class="input"/>
                    <el-button @click="forgetpwd()" type="text">Forgot your password?</el-button>
                    <button class="btn" @click.prevent="registerCount()">无账号？点此注册</button>
                </form>
            </div>
            <!-- 覆盖界面 -->
            <div class="container__overlay">
                <div class="overlay">
                    <div class="overlay__panel overlay--left">
                        <button class="btn" id="signIn" @click.prevent="goRegister()">还没有账号？去注册</button>
                    </div>
                    <div class="overlay__panel overlay--right">
                        <button class="btn" id="signUp">已有帐号？去登录</button>
                    </div>
                </div>
            </div>
        </div>
      <div class="box"></div>  
    </div>
</template>

<script>
export default {
     data() {
        return {
            form:{
                username:'Chao',
                password:'3210'
            },
            loginDialogVisible:false,
            registerDialogVisible:false,
            userId:''
        }
    },
    methods:{
        //切换注册登录界面
        exchangeBox(){
            //获取元素
            const signInBtn = document.getElementById("signIn");
            const signUpBtn = document.getElementById("signUp");
            const container = document.querySelector(".container");
            //开启方法监听
            signInBtn.addEventListener("click", () => {
                container.classList.remove("right-panel-active");
            });
            signUpBtn.addEventListener("click", () => {
                container.classList.add("right-panel-active");
            });
        },

        //登录
        async login(){
            if(this.form.username==''||this.form.password==''){
                this.$message.error("请输入账号或密码进行登录")
            }else{
                //打印表格中的内容看看
                // console.log(this.form.username+" //"+this.form.password)
                this.$router.push('index')
                const res = await this.$http.get('/login',{params:this.form})
                console.log(res.data)
                if(res.data.status!=200){
                    this.$message.error(res.data.meta)
                }else{
                    //如果是管理员账号，就进入管理员页面
                    if(this.form.username == 'admin'){  
                        this.$router.push('management')
                    }else{
                        //登录成功，清除登录框内的内容
                        this.form.username = ''
                        this.form.password = ''
                        //同时提示登录成功
                        this.$message.success("登录成功！！")
                        this.userId = res.data.user_id
                        //跳转到welcome页面
                        this.$router.push('index')
                        //用localStorage存储登录状态
                        localStorage.setItem('userId',this.userId)
                    } 
                }
                
            }
            
        },
        //前往注册界面s
        goRegister(){
            console.log("往注册页面")    
        },
        //注册账户
        async registerCount(){
            if(this.form.username==''||this.form.password==''){
                this.$message.error("请先输入账号和密码再进行注册")
            }else{
                const res = await this.$http.get('/register',{params:this.form})
                console.log(res.data)
                if(res.data.status != 200){
                    this.$message.error(res.data.meta)
                    this.form.username = ''
                    this.form.password = ''
                }else{
                    //注册成功，提示注册成功
                    this.$message.success("注册成功，请牢记密码")
                    //置空输入框
                    this.form.username = ''
                    this.form.password = ''
                }
            }                 
        },
        //找回密码
        forgetpwd(){
            this.$message.warning("很抱歉，请联系管理员 Chaoyxy 找回密码！")
        }
    },
    //mounted钩子
    mounted(){
        this.exchangeBox()
    }
}
</script>
<style>
@import url(../../assets/css/style.css);
</style>
<style lang="less" scoped>
[v-cloak]{
    display: none;
}
.box{
    width: 750px;
    background-color: yellowgreen;
    opacity: 0.5;
}
</style>